<template>
  <div>
    <el-form :model="form" label-width="140px" label-position="left">
      <!-- 交易类型 -->
      <el-form-item label="交易类型">
        <el-radio-group v-model="form.transactionType">
          <el-radio
            v-for="item in tradeTypeOptions"
            :key="item.id"
            :aria-readonly="true"
            :disabled="form.transactionType == item.id ? false : true"
            :value="item.id"
            >{{ item.businessName }}</el-radio
          >
        </el-radio-group>
      </el-form-item>

      <!-- 房屋位置 + 出售总价 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="房屋位置">
            <el-input readonly v-model="form.houseLocation" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="出售总价">
            <el-input readonly="" v-model="form.totalPrice">
              <template #append>元</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 成交日期 + 合同编号 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="成交日期">
            <el-input
              readonly
              v-model="form.saleDate"
              placeholder=""
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="合同编号">
            <el-input v-model="form.contractNo" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 签约员 -->
      <el-form-item label="签约员">
        <el-input v-model="form.signatoryName" readonly />
      </el-form-item>

      <!-- 卖方姓名 + 买方姓名 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="卖方姓名">
            <el-input v-model="form.sellerName" readonly />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="买方姓名">
            <el-input v-model="form.buyerName" readonly />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 卖方共有人 -->
      <el-row :gutter="10">
        <el-col :span="12">
          <el-form-item label="卖方共有人">
            <el-input v-model="form.serviceFeeCommonSellerName" readonly="" />
          </el-form-item>
        </el-col>
      </el-row>

      <!-- 动态费用行 -->
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="服务费（卖方）">
              <el-input
                  v-model="form.serviceFeeSellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeSeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeSellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>

            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="服务费（买方）">
              <el-input
                  v-model="form.serviceFeeBuyerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeBuyer"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeBuyerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="服务费代收（卖方）">
              <el-input
                  v-model="form.serviceFeeProxySellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeProxySeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%;"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeProxySellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%;"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="服务费代收（买方）">
              <el-input
                  v-model="form.serviceFeeProxyBuyerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeProxyBuyer"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%;"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.serviceFeeProxyBuyerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="交易费（卖方）">
              <el-input
                  v-model="form.transactionFeeSellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeSeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeSellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="交易费（买方）">
              <el-input
                  v-model="form.transactionFeeBuyerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeBuyer"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeBuyerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="交易费代收（卖方）">
              <el-input
                  v-model="form.transactionFeeProxySellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeProxySeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%;"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeProxySellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%;"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="交易费代收（买方）">
              <el-input
                  v-model="form.transactionFeeProxyBuyerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeProxyBuyer"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%;"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.transactionFeeProxyBuyerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%;"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="代理服务费（卖方）">
              <el-input
                  v-model="form.agencyServiceFeeSellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.agencyServiceFeeSeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%;"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.agencyServiceFeeSellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%;"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="代理店面">
              <el-input readonly v-model="dlStore" placeholder=""> </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <div>
        <el-row :gutter="10">
          <!-- 卖方 -->
          <el-col :span="12">
            <el-form-item label="代理服务费代收（卖方）">
              <el-input
                  v-model="form.agencyServiceFeeProxySellerAr"
                  placeholder=""
                  readonly
                  style="width: 32%;"
              >
                <template #prepend>应交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.agencyServiceFeeProxySeller"
                placeholder=""
                readonly
                style="width: 32%;margin-left: 1.5%"
              >
                <template #prepend>交</template>
                <template #append>元</template>
              </el-input>
              <el-input
                v-model="form.agencyServiceFeeProxySellerDebt"
                placeholder=""
                readonly
                style="width: 32%; margin-left: 1.5%;"
              >
                <template #prepend>欠</template>
                <template #append>元</template>
              </el-input>
            </el-form-item>
          </el-col>

          <!-- 买方 -->
          <el-col :span="12">
            <el-form-item label="代理人">
              <el-input readonly v-model="form.brokerName" placeholder="">
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </div>
      <el-row :gutter="10">
        <el-col :span="12" style="text-align: right">
          <el-button
            plain
            type="primary"
            icon="EditPen"
            @click="editPaymentSeller(form.sellPaymentOrderId)"
            >修改卖方费用</el-button
          >
        </el-col>
        <el-col :span="12" style="text-align: right">
          <el-button
            plain
            type="primary"
            icon="EditPen"
            @click="editPaymentBuy(form.buyPaymentOrderId)"
            >修改买方费用</el-button
          >
        </el-col>
      </el-row>
    </el-form>
    <!-- 买方 -->
    <el-dialog
      title="买方交款通知单"
      v-model="open"
      width="1000px"
      append-to-body
    >
      <BuyerPaymentNotice v-if="open" v-model:fData="buyForm" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
    <!-- 卖方 -->
    <el-dialog
      title="卖方交款通知单"
      v-model="openSeller"
      width="1000px"
      append-to-body
    >
      <SellererPaymentNotice v-if="openSeller" v-model:fData="sellerForm" />
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFormSeller">确 定</el-button>
          <el-button @click="openSeller = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, reactive, watch, defineProps, nextTick } from "vue";
import { listAllTransaction } from "@/api/contract/contractList";
import { queryPayMent, editPayMent } from "@/api/business/paymentSeller";
import BuyerPaymentNotice from "@/views/business/paymentBuy/components/BuyerPaymentNotice.vue";
import SellererPaymentNotice from "@/views/business/paymentSeller/components/BuyerPaymentNotice.vue";
const props = defineProps({
  msgData: {
    type: Object,
    required: true,
  },
});
const { proxy } = getCurrentInstance();
const emit = defineEmits(["update-dealBaseInfo"]);
// 可选交易类型
const tradeTypeOptions = ref([]);

function getTransactionList() {
  listAllTransaction().then((res) => {
    tradeTypeOptions.value = res.data;
  });
}
getTransactionList();

//买方交款通知单
const open = ref(false);
const buyForm = ref({});
function editPaymentBuy(id) {
  const params = {
    id,
    type: 2,
  };
  queryPayMent(params).then((response) => {
    buyForm.value = response.data;
    open.value = true;
  });
}
/** 提交按钮 */
function submitForm() {
  editPayMent(buyForm.value).then((res) => {
    open.value = false;
    proxy.$modal.msgSuccess(res.msg);
    emit("update-dealBaseInfo", true);
  });
}
//卖方
const openSeller = ref(false);
const sellerForm = ref({});
function editPaymentSeller(id) {
  const params = {
    id,
    type: 1,
  };
  queryPayMent(params).then((response) => {
    sellerForm.value = response.data;
    openSeller.value = true;
  });
}
/** 提交按钮 */
function submitFormSeller() {
  editPayMent(sellerForm.value).then((res) => {
    openSeller.value = false;
    proxy.$modal.msgSuccess(res.msg);
    emit("update-dealBaseInfo", true);
  });
}

// 表单数据对象
const dlStore = ref("");
const form = ref(props.msgData);
dlStore.value = form.value.regionName + form.value.storeName;
// 监听props变化并更新本地状态
watch(
  () => props.msgData,
  (newVal) => {
    form.value = newVal;
  }
);
// 如果需要对外暴露数据
defineExpose({ form });
</script>

<style scoped>
.el-form-item {
  margin-bottom: 14px;
}
</style>
